<template>
	<view class="page">
		<u-grid class="grided" :border="true" @click="click">
			<u-grid-item v-for="(item, index) in baseList" :key="index">
				<view class="items flex">
					<image class="img" :src="item.img" mode=""></image>
					<view class="name">
						<view class="bold font-size-30 m-b-10">{{ item.title }}</view>
						<view>{{ item.num }}</view>
					</view>
				</view>
			</u-grid-item>
		</u-grid>
	</view>
</template>

<script>
export default {
	data() {
		return {
			baseList: [
				{
					num: 0,
					title: '现有积分',
					img: '../../../static/mains/b1.png'
				},
				{
					num: 0,
					title: '推荐用户',
					img: '../../../static/mains/b2.png'
				},
				{
					title: '二维码',
					img: '../../../static/mains/b3.png'
				}
			]
		};
	},
	onLoad(options) {
		this.baseList[0].num = options.integral;
		this.baseList[1].num = options.tj_num;
	},
	methods: {
		click(i) {
			if (i == 0) {
				uni.navigateTo({
					url: '/pages/main/retail/jifen'
				});
			} else if (i == 1) {
				uni.navigateTo({
					url: '/pages/main/retail/tuijian'
				});
			} else if (i == 2) {
				uni.navigateTo({
					url: '/pages/main/retail/codeimg'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/ .img {
	width: 50rpx;
	height: 55rpx;
	margin-right: 20rpx;
}
.page {
	padding: 40rpx 25rpx;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background-color: #eee;
	box-sizing: border-box;

	.grided {
		background-color: #fff;
		border-radius: 20rpx;

		.items {
			padding: 35rpx 0;

			.name {
				view:last-child {
					color: #9c9c9c;
					font-size: 24rpx;
				}
			}
		}
	}
}
</style>